<template>
  <view class="start-index">
    <!-- 首页 -->
    <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Home ref="home" v-if="currentIndex === 0"></Home>
      </scroll-view>
    </view>
    
    <!-- 发现页 -->
    <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Discovery ref="discovery" v-if="currentIndex === 1"></Discovery>
      </scroll-view>
    </view>
    
    <!-- 我的页 -->
    <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Mine ref="mine" v-if="currentIndex === 2"></Mine>
      </scroll-view>
    </view>
    
    <!-- 底部tabbar -->
    <tn-tabbar-big
      v-model="currentIndex"
      :list="tabbarList"
      activeColor="#46C265"
      inactiveColor="#303132"
      activeIconColor="#46C265"
      inactiveIconColor="#303132CC"
      :animation="true"
      :safeAreaInsetBottom="true" 
      @change="switchTabbar"
    ></tn-tabbar-big>
  </view>
</template>
<script>
  import Home from './home/index.vue'
  import Discovery from './work/index'
  import Mine from './mine/index.vue'
  
  export default {
    components: {
      Home,
      Discovery,
      Mine
    },
    data() {
      return {
        // 底部tabbar菜单数据
        tabbarList: [
          {
            title: '首 页',
            activeIcon: 'home-smile-fill',
            inactiveIcon: 'home-smile'
          },
          {
            title: '',
            activeIcon: 'menu-circle-fill',
            inactiveIcon: 'add',
            activeIconColor: '#FFFFFF',
            inactiveIconColor: '#FFFFFF',
            iconSize: 56,
            out: true
          },
          {
            title: '我 的',
            activeIcon: 'my-circle-fill',
            inactiveIcon: 'my-circle'
          }
        ],
        // tabbar当前被选中的序号
        currentIndex: 0,
        // 自定义底栏对应页面的加载情况
        tabberPageLoadFlag: []
      }
    },
    onLoad(options) {
      const index = Number(options.index || 0)
      // 初始化底部tabbar菜单列表页面加载状态
      this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
        return index === tabbar_index
      })
      this.switchTabbar(index)
    },
    onShow() {
      // 当页面显示时，重新触发当前选中页面的生命周期或自定义方法
      this.triggerCurrentPageShow()
    },
    methods: {
      // 切换导航时调用
      switchTabbar(index) {
        this._switchTabbarPage(index)
      }, 
      // 滚动到底部事件处理
      tabbarPageScrollLower(e) {
        // 根据页面进行相关数据加载
      },
      // 切换导航页面，加载对应的页面并触发created()生命周期
      _switchTabbarPage(index) {
        console.log("index", index)
        const selectPageFlag = this.tabberPageLoadFlag[index]
        if (selectPageFlag === undefined) {
          return
        }
        // 如果页面还未加载过，则标记为已加载并切换至该页面
        if (selectPageFlag === false) {
          this.tabberPageLoadFlag[index] = true
        }
        this.currentIndex = index

        // 在切换时，手动触发每个页面的生命周期
        this.$nextTick(() => {
          this.triggerCurrentPageShow()
        })
      },
      // 触发当前页面的自定义show事件
      triggerCurrentPageShow() {
        if (this.currentIndex === 0) {
          this.$refs.home  && this.$refs.home.handlePageShow()
        } else if (this.currentIndex === 1) {
          this.$refs.discovery  && this.$refs.discovery.handlePageShow()
        } else if (this.currentIndex === 2) {
          this.$refs.mine  && this.$refs.mine.handlePageShow()
        }
      }
    }
  }
</script>


<style lang="scss" scoped>
</style>
